<template>
  <div class="header-container">
    <!-- 左侧 logo 和 标题区域 -->
    <div class="header-left">
      <!-- logo -->
      <img class="header-left-img" src="../../assets/logo.png" alt="" />
      <!-- 标题 -->
      <h4 class="header-left-title">XXX后台管理系统</h4>
    </div>

    <!-- 右侧按钮区域 -->
    <div class="header-right">
      <button type="button" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  methods: {
    logout() {
      // 1. 清空 token
      localStorage.removeItem('token')
      // 2. 跳转到登录页面
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
  // background-color: #41b883;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px;

  .header-left {
    display: flex;
    align-items: center;

    .header-left-img {
      height: 50px;
    }
    .header-left-title {
      margin-left: 3px;
    }
  }
}
</style>
